<template>
  <view class="work-hour-list-container">
    <uni-table border stripe emptyText="暂无更多数据" >
    	<!-- 表头行 -->
    	<uni-tr>
    		<uni-th align="center">工时年月</uni-th>
    		<uni-th align="center">姓名</uni-th>
    		<uni-th align="left">总工时</uni-th>
    	</uni-tr>
    	<!-- 表格数据行 -->
    	<uni-tr v-for="item in tableData" @click.native="goToDetail(item)">
    		<uni-td>{{item.clockDate}}</uni-td>
    		<uni-td>{{item.talentName}}</uni-td>
    		<uni-td>{{item.workingHours}}</uni-td>
    	</uni-tr>
    	<!-- <uni-tr>
    		<uni-td>2020-10-21</uni-td>
    		<uni-td>HanMeiMei</uni-td>
    		<uni-td>北京市海淀区</uni-td>
    	</uni-tr>
    	<uni-tr>
    		<uni-td>2020-10-22</uni-td>
    		<uni-td>LiLei</uni-td>
    		<uni-td>北京市海淀区</uni-td>
    	</uni-tr>
    	<uni-tr>
    		<uni-td>2020-10-23</uni-td>
    		<uni-td>Danner</uni-td>
    		<uni-td>北京市海淀区</uni-td>
    	</uni-tr> -->
    
    </uni-table>
  </view>
</template>

<script>
	import {attendancePage} from '@/api/chuqin/chuqin.js'
export default {
  data() {
    return {
		queryParams:{
			pageNum:1,
			pageSize:10
		},
      tableData: [
        { workHourMonth: '2025-02', name: '张小刚', totalHours: 40 },
        { workHourMonth: '2025-01', name: '张小刚', totalHours: 200 },
        { workHourMonth: '2024-12', name: '张小刚', totalHours: 200 },
        { workHourMonth: '2024-11', name: '张小刚', totalHours: 200 },
        { workHourMonth: '2024-10', name: '张小刚', totalHours: 200 },
        { workHourMonth: '2024-09', name: '张小刚', totalHours: 200 },
        { workHourMonth: '2024-08', name: '张小刚', totalHours: 200 },
        { workHourMonth: '2024-07', name: '张小刚', totalHours: 200 },
        { workHourMonth: '2024-06', name: '张小刚', totalHours: 200 },
        { workHourMonth: '2024-05', name: '张小刚', totalHours: 200 }
      ]
    };
  },
  methods:{
	  async attendancePage() {
	  	let res = await attendancePage();
		console.log(res,'出勤')
		if(res.code == 200){
			this.tableData = res.rows
		}
	  },
	  goToDetail(item){
		  console.log("跳转出勤详情")
		uni.navigateTo({
			url:'/pages/chuQing/chuQing?chuQinInfo='+encodeURIComponent(JSON.stringify(item))
		})  
	  },
  },
  mounted() {
  	this.attendancePage()
  },	
};
</script>

<style scoped>
.work-hour-list-container {
  padding: 10px;
}
.table-header,
.table-body {
  display: flex;
  flex-direction: row;
  border: 1px solid #ccc;
  margin-bottom: -1px; /* 解决边框重叠问题 */
}
.header-item,
.body-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-right: 1px solid #ccc;
}
.header-item:last-child,
.body-item:last-child {
  border-right: none;
}
</style>